<template>
  <div class="home-xin">
    <div class="web-heade">
      <div class="header">
        <div class="right-area">
          <div class="head-left-content box">
            <img
              :src="configObj.homeLogo"
              alt=""
            >
            <div>
              <div class="title">信用园区管理服务平台</div>
              <div class="desc">CREDIT PARK MANAGEMENT SERVICE PLATFORM</div>
            </div>
          </div>
          <div class="head-right-content">
            <a href="#about">服务案例</a>
            <a href="#company">合作机构</a>
            <a href="#apply">申请流程</a>
            <a href="#about">关于平台</a>
            <div
              v-if="!name"
              class="btn-link"
              @click="linkTo('/login')"
            >注册/登录</div>
            <div v-if="name">
              <div
                class="r-block logout r-pointer"
                @click="loginOut()"
              ><span class="fa fa-sign-out">退出登录</span></div>
              <div class="r-block separator"><span>|</span></div>
              <div class="r-block nikname">你好，{{name}}</div>
            </div>
            <div
              v-if="name"
              @click="handleLink"
              style="margin-left:20px"
              class="r-block r-pointer"
            ><span style="margin-right:12px;color: #D1D1D1;">|</span> 管理中心</div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-wrap">
      <a
        class="banner"
        style="display:block;height:584px;width:100%;backgroundRepeat:no-repeat;"
      >
      </a>
    </div>
    <div class="total-num">
      <div class="total-list">
        <div class="list-num"><span class="num">
            <v-countup
              :duration="3"
              :start-value="start"
              :end-value="end"
            ></v-countup>
          </span><span class="num-name">家</span> </div>
        <div class="list-name">入驻企业</div>
      </div>
      <div class="total-list">
        <div class="list-num"><span class="num">
            <v-countup
              :duration="3"
              :start-value="start"
              :end-value="end1"
            ></v-countup>
          </span><span class="num-name">次</span> </div>
        <div class="list-name">融资服务</div>
      </div>
      <div class="total-list">
        <div class="list-num"><span class="num">
            <v-countup
              :duration="3"
              :start-value="start"
              :decimals="1"
              :end-value="end2"
            ></v-countup>
          </span><span class="num-name">亿</span></div>
        <div class="list-name">放贷金额</div>
      </div>
    </div>
    <!-- 金融服务 -->
    <div class="product-service">
      <div class="title">
        <div class="name">园区金融产品</div>
        <div>PARK FINANCIAL PRODUCTS</div>
      </div>
      <div class="product-wrap box">
        <div
          v-if="dataList&&dataList.photoFiles"
          @click="linkTo('/productDetail',dataList.id)"
          :style="{backgroundImage:'url('+dataList.photoFiles[0].fileUrl+')'}"
          class="product-left"
        >
          <div class="bottom"></div>
          <div class="bottom-wrap">
            <div class="product-name">{{dataList.productName}}</div>
            <div class="product-desc"><span>贷款额度：{{dataList.loanFundMin+' 万元'+' ~ '+dataList.loanFundMax+' 万元'}}</span> <span>贷款期限：{{dataList.investYearDesc}}</span><span> 贷款年化利率：{{dataList.minReportRate}}%/年</span></div>
          </div>
        </div>
        <div class="product-right">
          <div class="product-list">
            <div class="list-title">风险贷款</div>
          </div>
          <div class="product-list">
            <div class="list-title">贷投联动</div>
          </div>
          <div class="product-list">
            <div class="list-title">技术成果贷</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 服务案例 -->
    <div
      id="about"
      class="service-case"
    >
      <div class="title">
        <div class="name">服务的园区企业</div>
        <div>SERVICE COMPANY</div>
      </div>
      <div class="case-wrap">
        <div class="case-item box">
          <div
            v-for="(item,index) in caseArr"
            :key="index"
            class="case-list"
          >
            <div class="bottom">
              <div class="name">{{item.name}}</div>
              <div class="tag">{{item.type}}</div>
              <div class="line"></div>
              <div class="date">服务时间：{{item.date}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 服务案例 -->
    <div
      id="apply"
      class="type-case"
    >
      <div class="title">
        <div class="name">平台申请流程</div>
        <div>PLATFORM APPLICATION PROCESS</div>
      </div>
      <div class="type-wrap box">
        <div
          class="type-list"
          :key="index"
          v-for="(item,index) in typeArr"
        >
          <div class="cirlce box box-pack-center box-align-center">
            <div class="icon"></div>
          </div>
          <div class="name">{{item}}</div>
        </div>
      </div>
      <div
        @click="()=>{this.$router.push('register')}"
        class="btn"
      >前往注册</div>
    </div>
    <div
      id="about"
      class="about-wrap"
    >
      <div class="about-content box">
        <div class="about-left"></div>
        <div class="left">
          <div class="name">关于平台</div>
          <div class="english">ABOUT US</div>
          <div class="banner"></div>
          <div class="desc">
            信用园区管理服务平台是一家致力于服务上海市多个园区内的中小科创企业而设立的金融科技服务平台，信用园区管理服务平台凭借与各家合作银行的多元化科技贷款产品为依托，以及公司自身强大的数据分析能力，通过系统端展开信贷信息收集，智能诊断、智能匹配、智能数据风控，为不同发展阶段的科技型企业提供全成长周期的智能融资服务。
          </div>
        </div>
        <div class="right-content">
          <div class="name">新闻资讯</div>
          <div class="english">NEWS AND INFORMATION</div>
          <div class="info-item">
            <div class="info-list box">
              <div class="pic"></div>
              <div class="info">
                <div class="info-title">信用园区管理服务平台与闵行区人民政府达成战略合作</div>
                <div class="desc">9月12日，闵行建设国家科技成果转移转化示范区推进动员会在区委党校召开，并出台一系列相应政策。同时信用园区管理服务平台与闵行区人民政府达成战略合作，服务闵行区部分园区的企业。</div>
                <div class="nums box">
                  <div class="date"><span></span>2018年09月12日</div>
                  <div class="click"><span></span>984 次点击</div>
                </div>
              </div>
            </div>
            <div class="info-list box">
              <div class="pic"></div>
              <div class="info">
                <div class="info-title">浦东新区领导莅临信用园区管理平台 探讨企业园区金融服务</div>
                <div class="desc">8月23日上午9点半，张江科学城建设管理办公室创业服务中心 廖紫君老师、张江科学城建设管理办公室创业服务中心 陆海燕老师、浦东新区金融服务局 李贞老师、浦东新区科经委 陈日东老师、张江高科创投 许黎蓓老师…</div>
                <div class="nums box">
                  <div class="date"><span></span>2018年08月23日</div>
                  <div class="click"><span></span>4326 次点击</div>
                </div>
              </div>
            </div>
            <div class="info-list box">
              <div class="pic"></div>
              <div class="info">
                <div class="info-title">信用园区管理服务平台正式上线</div>
                <div class="desc">上海首个信用园区管理服务平台正式上线，将通过致力于服务上海市多个园区内的中小科创企业而设立的金融科技服务平台，凭借与各家合作银行的多元化科技贷款产品为依托，为不同发展阶段的科技型企业提供全成长周期的智能贷顾服务。</div>
                <div class="nums box">
                  <div class="date"><span></span>2018年08月02日</div>
                  <div class="click"><span></span>1632 次点击</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      id="company"
      class="agency-wrap"
    >
      <div class="title">
        <div class="name">合作机构</div>
        <div>COOPERATIVE ANGENCY</div>
      </div>
      <div class="agency-content">
        <div class="agency-list">
          <img
            src="../../images/credit-park/Bitmap(13).png"
            alt=""
          >
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-wrap">
        <div class="footer-left">
          <p>友情链接： 中华人民共和国国家发展和改革委员会 上海市发展和改革委员会 信用中国 诚信上海 上海市市场信用信息共享服务平台 </p>
          <p>【信用园区管理服务平台】</p>
          <p> 版权所有：上海市社会信用促进中心 © 2018 沪ICP备：17053360号</p>
          <p> 主办单位：上海市社会信用促进中心 上海创巢投资管理有限公司</p>
          <p>地址：上海市普陀区金沙江路980号华大科技园E3楼8层</p>
        </div>
        <div class="footer-right">
          <img
            src="../../images/credit-park/scan.png"
            alt=""
          >
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div class="product-line">您将申请产品{{productName}},请确认</div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button
          type="success"
          @click="confrimBtn"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js"),
  common = require("../../common.js"),
  config = require("../../config/config.js");
export default {
  data() {
    return {
      linkArr: [
        {
          name: "首页",
          link: "/"
        },
        {
          name: "贷款产品",
          link: "/product"
        },
        {
          name: "关于我们",
          link: "/aboutUs"
        }
      ],
      name: "",
      arrow_transform: false,
      dataList: null,
      centerDialogVisible: false,
      productName: "",
      id: "",
      bannerArr: [],
      start: 1,
      end: 5008,
      end1: 6815,
      end2: 2.8,
      newsIndex: 0,
      caseArr: [
        {
          name: "依图科技",
          type: "智能安防 / 智慧医疗",
          date: "2017年11月"
        },
        {
          name: "旷视科技",
          type: "人脸识别 / 身份验证",
          date: "2018年3月"
        },
        {
          name: "快仓智能",
          type: "智能机器人 / 智慧仓",
          date: "2018年5月"
        },
        {
          name: "寒武纪科技",
          type: "人工智能领域 / 芯片",
          date: "2018年9月"
        }
      ],
      typeArr: [
        "平台注册",
        "填写资料",
        "系统初审",
        "企业尽调",
        "资料递交银行",
        "银行审核",
        "审批放款"
      ],
      configObj: ""
    };
  },
  components: {
    "v-countup": () => import("vue-countupjs")
  },
  created() {
    let arr = location.hostname.split(".");
    let urlName = arr[0] == "www" ? arr[1] : arr[0];
    this.configObj = config.urlObjs[urlName];
    this.name = common.getCookie("nickname");
  },
  mounted() {
    this.name = common.getCookie("nickname");
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    this.getProductPage();
  },
  methods: {
    //head
    linkTo(link) {
      this.$router.push(link);
    },
    changeSwiper(num) {
      this.newsIndex = num;
      this.$refs.carousel.setActiveItem(num);
    },
    handleLink() {
      const userType = common.getCookie("userType");
      if (userType == "company") {
        this.linkTo("/ccOrderHand");
      } else if (userType == "channel") {
        this.linkTo("/channelOrderHand");
      } else {
        this.linkTo("/bankBankOrderHand");
      }
      localStorage.removeItem("defaultOpened");
    },
    loginOut() {
      common.setCookie("sessionId", "");
      common.setCookie("nickname", "");
      this.$nextTick(() => {
        this.$router.replace("/login");
      });
    },
    transform_arrow(visible) {
      this.arrow_transform = visible;
    },
    //end
    returnPrice(num) {
      return common.returnNum(num);
    },
    linkTo(link, id) {
      this.$router.push({ path: link, query: { id: id } });
    },
    returnArrName(arr) {
      let arr1 = [];
      arr.map((item, index) => {
        let itemArea = "";
        if (item.financingProvinceName) {
          itemArea = item.financingProvinceName;
        }
        if (item.financingCityName) {
          itemArea = item.financingProvinceName + item.financingCityName;
        }
        if (item.financingDistrictName) {
          itemArea =
            item.financingProvinceName +
            item.financingCityName +
            item.financingDistrictName;
        }
        arr1.push(itemArea);
      });
      return arr1.join(";");
    },
    returnBody(data) {
      let arr = [];
      data.map(item => {
        arr.push(item.fundBodyDesc);
      });
      return arr.length ? arr.join(",") : "--";
    },
    applyBtn(id, name) {
      this.centerDialogVisible = true;
      this.productName = name;
      this.id = id;
    },
    confrimBtn() {
      let url = CONSTANT.URL.SYSTEM.APPLYPRODUCT,
        data = { productId: this.id },
        dataForm = {};
      common.requestAjax(url, JSON.stringify(data), dataForm, res => {
        this.centerDialogVisible = false;
        if (res.status == 200) {
          this.$message({
            message: "申请成功！",
            type: "success"
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getProductPage() {
      let url = CONSTANT.URL.WEB.FINDFINANCEBYPAGE,
        data = {},
        dataForm = {
          pageIndex: 1,
          pageSize: 5
        };
      common.requestAjax(url, JSON.stringify(data), dataForm, res => {
        if (res.status == 200) {
          this.dataList = res.data.bussData.length ? res.data.bussData[0] : {};
        } else {
        }
      });
    },
    getBannerList() {
      let url = CONSTANT.URL.WEB.FINDBANNERBYPAGE;
      let dataForm = {},
        data = {
          pageIndex: 1,
          pageSize: 10
        };
      common.requestAjax(url, data, dataForm, res => {
        if (res.status == 200) {
          let data = res.data;
        }
      });
    }
  }
};
</script>

<style lang="scss">
@keyframes click {
  0% {
    top: 9px;
  }
  50% {
    top: 14px;
  }
  100% {
    top: 9px;
  }
}
.web-header {
  border-bottom: 1px solid #f2f2f2;
}

.home-xin {
  overflow: hidden;
  background-color: #fff;
  .web-heade {
    .header {
      height: 130px;
      background-color: #fff;
      font-size: 14px;
      /*padding-right: 18.7%;*/
      overflow: hidden;
      /*width: 85%;*/
      .el-dropdown-menu__item {
        padding: 0;
        span {
          padding: 0 20px;
        }
      }
      .right-area {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
        height: 130px;
        .head-left-content {
          font-size: 16px;
          color: #333333;
          float: left;
          img {
            width: 83px;
            height: 76px;
            margin-top: 29px;
            margin-right: 21px;
          }
          .title {
            font-size: 28px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            color: rgba(90, 86, 86, 1);
            margin: 38px 0 10px 0;
          }
          .desc {
            position: relative;
            top: -5px;
            font-size: 14px;
            font-family: ArialMT;
            font-weight: 400;
            color: rgba(163, 163, 163, 1);
          }
          a {
            position: relative;
            top: -19px;
            color: #459eff;
            font-family: PingFangSC-Regular;
            margin-right: 13px;
            padding-bottom: 0px;
            border-bottom: 1px solid #459eff;
            transition: all 0.2s linear;
            &:hover {
              color: #959dff;
              border-bottom: 1px solid #959dff;
            }
          }
        }
        .head-right-content {
          float: right;
          height: 130px;
          line-height: 130px;
          font-family: PingFangSC-Regular;
          a {
            font-size: 18px;
            font-weight: 400;
            color: rgba(92, 88, 88, 1);
            margin-left: 27px;
          }
          .btn-link {
            width: 101px;
            height: 31px;
            border-radius: 40px;
            background-color: #e8340a;
            color: #fff;
            text-align: center;
            line-height: 31px;
            margin-top: 49px;
            margin-left: 33px;
            transition: all 0.2s linear;
            font-size: 18px;
            cursor: pointer;
          }
          div {
            float: right;
          }
          .r-pointer {
            cursor: pointer;
          }
          .r-block {
            float: right;
            font-size: 14px;
            span {
              margin-left: -6px;
              &:before {
                position: relative;
                right: 6px;
              }
            }
            .r-inline {
              float: right;
              margin-left: 20px;
            }
            .regist {
              width: 60px;
              height: 26px;
              background-color: #ed7018;
              text-align: center;
              border-radius: 13px;
              position: relative;
              top: 7px;
              line-height: 28px;
              margin-left: 0px;
              color: white;
            }
          }
          .nikname {
            color: #666666;
          }
          .logout {
            color: #000000;
            font-weight: bold;
          }
          .separator {
            margin-left: 23px;
            margin-right: 23px;
            color: #d1d1d1;
          }
        }
      }
      .tip {
        padding: 0 1.46% 0 0.48%;
      }
      .my-home {
        color: #ee7723;
        cursor: pointer;
      }
      .col-sufix {
        margin: 0 3px 0 3px;
        color: #ee7723;
      }
      .login1 {
        color: #ee7723;
        cursor: pointer;
      }
      .login {
        /*padding: 0 1.46% 0 .48%;*/
        &.name {
          color: #111111;
        }
        .arrow {
          width: 9px;
          height: 7px;
          margin-top: 16px;
          background: url(../../images/arrow1.png) no-repeat;
          background-size: 100%;
          margin-left: 7px;
          transform: rotate(0deg);
          -ms-transform: rotate(0deg); /* Internet Explorer */
          -moz-transform: rotate(0deg); /* Firefox */
          -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
          -o-transform: rotate(0deg); /* Opera */
          transition: transform 0.5s;
          -moz-transition: transform 0.5s; /* Firefox 4 */
          -webkit-transition: transform 0.5s; /* Safari 和 Chrome */
          -o-transition: transform 0.5s; /* Opera */
        }
        &:hover {
          .arrow {
            transform: rotate(-180deg);
            -ms-transform: rotate(-180deg); /* Internet Explorer */
            -moz-transform: rotate(-180deg); /* Firefox */
            -webkit-transform: rotate(-180deg); /* Safari 和 Chrome */
            -o-transform: rotate(180deg); /* Opera */
            transition: transform 0.2s;
            -moz-transition: transform 0.2s; /* Firefox 4 */
            -webkit-transition: transform 0.2s; /* Safari 和 Chrome */
            -o-transition: transform 0.2s; /* Opera */
          }
        }
        .arrow-transform {
          transform: rotate(-180deg);
          -ms-transform: rotate(-180deg); /* Internet Explorer */
          -moz-transform: rotate(-180deg); /* Firefox */
          -webkit-transform: rotate(-180deg); /* Safari 和 Chrome */
          -o-transform: rotate(180deg); /* Opera */
          transition: transform 0.2s;
          -moz-transition: transform 0.2s; /* Firefox 4 */
          -webkit-transition: transform 0.2s; /* Safari 和 Chrome */
          -o-transition: transform 0.2s; /* Opera */
        }
      }
      .header-select {
        position: relative;
        color: #ee7723;
        padding-right: 0.48%;
        &:after {
          content: "";
          position: absolute;
          width: 1px;
          height: 14px;
          background-color: #d1d1d1;
          right: 0;
          top: 14px;
        }
      }
      /*
            div{
                float: right;
                cursor: pointer;
            }
            */
    }
  }

  .swiper-wrap {
    height: 584px !important;
    .banner {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url("../../images/credit-park/Bitmap(3).jpg");
      .banner-title {
        font-size: 50px;
        font-family: FZXKJW--GB1-0;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
      }
    }
    .el-carousel {
      height: 100%;
      .el-carousel__container {
        height: 100%;
      }
    }
    .el-carousel__arrow {
      font-size: 22px;
      width: 60px;
      height: 60px;
      background-color: rgba(31, 45, 61, 0.15);
      &:hover {
        background-color: rgba(31, 45, 61, 0.3);
      }
    }
    .el-carousel__indicator {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      &.is-active {
        .el-carousel__button {
          background-color: #ed7018;
          border: none;
          border: 1px solid #ed7018;
        }
      }
      .el-carousel__button {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 1px solid rgba(153, 153, 153, 0.4);
        box-sizing: border-box;
        background-color: #fff;
        opacity: 1;
      }
    }
    .el-carousel__indicators {
      bottom: 75px;
    }
    .el-carousel__item {
      a {
        height: 100%;
      }
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
    @media screen and (max-width: 1440px) {
      height: 400px;
    }
    @media screen and (min-width: 1441px) and (max-width: 1600px) {
      height: 499px;
    }
  }
  .total-num {
    position: relative;
    width: 1000px;
    height: 200px;
    background-color: #fff;
    margin: -122px auto 0;
    z-index: 100;
    box-shadow: 0px 3px 8px 0px rgba(170, 170, 170, 0.5);
    border-radius: 21px;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 30px;
    .total-list {
      position: relative;
      float: left;
      font-size: 20px;
      color: #666;
      width: 33.33%;
      height: 110px;
      text-align: center;
      box-sizing: border-box;
      &:last-child {
        border: none;
        &:after {
          width: 0;
        }
      }
      &:after {
        content: "";
        position: absolute;
        right: 0;
        top: 20px;
        width: 1px;
        height: 80px;
        background: #e9e9e9;
      }
      .list-num {
        position: relative;
        margin-bottom: 12px;
        padding-top: 10px;
        span.num {
          font-size: 50px;
          color: #ed7018;
        }
        span.num-name {
          position: absolute;
          top: 18px;
          margin-left: 5px;
          display: inline-block;
          font-family: MicrosoftYaHei;
          font-size: 14px;
          color: #777;
        }
      }
      .list-name {
        font-size: 16px;
        color: #333;
      }
    }
    @media screen and (max-width: 1440px) {
      height: 100px;
      padding-top: 20px;
      padding-bottom: 25px;
    }
    @media screen and (min-width: 1441px) and (max-width: 1600px) {
      height: 120px;
    }
  }
  .vjs-poster {
    background-color: #fff !important;
  }
  //金融服务
  .product-service {
    margin-top: 92px;
    background-color: #fff;
    padding-bottom: 120px;
    .title {
      text-align: center;
      .name {
        font-size: 24px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(92, 88, 88, 1);
        letter-spacing: 5px;
      }
      div {
        font-size: 18px;
        font-family: AbadiMT-CondensedLight;
        font-weight: normal;
        color: rgba(185, 185, 185, 1);
        margin-top: 8px;
      }
    }
    .product-wrap {
      width: 1200px;
      margin: 45px auto 0;
      .product-left {
        position: relative;
        cursor: pointer;
        width: 597px;
        height: 381px;
        border-radius: 5px;
        margin-right: 18px;
        background-size: 100%;
        .bottom {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 72px;
          background: rgba(0, 0, 0, 1);
          opacity: 0.51;
          border-radius: 0px 0px 6px 6px;
        }
        .bottom-wrap {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 72px;
          padding-left: 18px;
          .product-name {
            font-size: 20px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            color: rgba(255, 255, 255, 1);
            margin-top: 10px;
            margin-bottom: 5px;
          }
          .product-desc {
            font-size: 14px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            span {
              margin-right: 10px;
            }
          }
        }
      }
      .product-right {
        .product-list {
          position: relative;
          margin-bottom: 9px;
          width: 597px;
          height: 123px;
          border-radius: 5px;
          margin-right: 14px;
          background-size: 100%;
          background: url("../../images/credit-park/Bitmap(11).png");
          &:nth-child(2) {
            background: url("../../images/credit-park/Bitmap(10).png");
            .list-title {
              top: 15px;
              left: 190px;
            }
          }
          &:nth-child(3) {
            background: url("../../images/credit-park/Bitmap(12).png");
            .list-title {
              top: inherit;
              bottom: 21px;
            }
          }
          .list-title {
            position: absolute;
            top: 15px;
            left: 20px;
            font-size: 20px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            color: rgba(255, 255, 255, 1);
            text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
          }
        }
      }
    }
  }
  //服务案例
  .service-case {
    background-color: #f7f7f7;
    height: 585px;
    padding-top: 63px;
    background-size: cover;
    background-image: url("../../images/credit-park/Bitmap(4).png");
    .title {
      text-align: center;
      .name {
        font-size: 24px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
        letter-spacing: 5px;
      }
      div {
        font-size: 18px;
        font-family: AbadiMT-CondensedLight;
        font-weight: normal;
        color: rgba(85, 85, 85, 1);
        margin-top: 8px;
      }
    }
    .case-wrap {
      margin: 30px 0 0;
      .el-carousel__container {
        height: 330px;
      }
      .el-carousel__arrow {
        width: 73px;
        height: 73px;
        font-size: 50px;
        background-color: #efefef !important;
        border: 0px !important;
        &:hover {
          background-color: #e1e1e1 !important;
        }
        i {
          color: #fff !important;
        }
      }
      .el-carousel__arrow--left {
        position: relative;
        left: 87px !important;
      }
      .el-carousel__arrow--right {
        // position: relative;
        right: 87px !important;
      }
      .case-item {
        width: 1200px;
        margin: 0 auto;
        .case-list {
          position: relative;
          width: 297px;
          height: 387px;
          margin-right: 9px;
          cursor: pointer;
          background-size: cover;
          border-radius: 8px;
          background-image: url("../../images/credit-park/Bitmap(5).png");
          &:nth-child(2) {
            background-image: url("../../images/credit-park/Bitmap(6).png");
          }
          &:nth-child(3) {
            background-image: url("../../images/credit-park/Bitmap(7).png");
          }
          &:nth-child(4) {
            background-image: url("../../images/credit-park/Bitmap(8).png");
          }
          &:hover {
            -webkit-transform: scale(1.04);
            transform: scale(1.04);
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            -webkit-opacity: 1;
            -ms-opacity: 1;
            opacity: 1;
          }
          .bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 124px;
            padding-left: 20px;
            .name {
              font-size: 18px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(47, 47, 47, 1);
              margin-top: 15px;
            }
            .tag {
              font-size: 12px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(92, 88, 88, 1);
              margin: 6px 0 8px;
            }
            .line {
              width: 51px;
              height: 1px;
              background-color: rgba(232, 52, 10, 1);
            }
            .date {
              margin-top: 14px;
              font-size: 12px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(92, 88, 88, 1);
            }
          }
          &:first-child {
            margin-left: 26px;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
  .type-case {
    margin-top: 70px;
    background-color: #fff;
    padding-bottom: 86px;
    .title {
      text-align: center;
      .name {
        font-size: 24px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(92, 88, 88, 1);
        letter-spacing: 5px;
      }
      div {
        font-size: 18px;
        font-family: AbadiMT-CondensedLight;
        font-weight: normal;
        color: rgba(185, 185, 185, 1);
        margin-top: 8px;
      }
    }
    .type-wrap {
      width: 1200px;
      margin: 90px auto 0;
      .type-list {
        position: relative;
        margin-right: 55px;
        text-align: center;
        font-size: 18px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(92, 88, 88, 1);
        &:after {
          content: "";
          position: absolute;
          right: -40px;
          top: 48px;
          width: 25px;
          height: 28px;
          background-size: 100%;
          background-image: url("../../images/credit-park/arrow.png");
        }
        .cirlce {
          width: 120px;
          height: 120px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 12px 0px rgba(184, 184, 184, 0.5);
          border-radius: 50%;
          margin-bottom: 30px;
          .icon {
            width: 55px;
            height: 50px;
            background-size: 100%;
            background-image: url("../../images/credit-park/7.png");
          }
        }
        &:nth-child(2) {
          .icon {
            width: 53px;
            height: 53px;
            background-image: url("../../images/credit-park/1.png");
          }
        }
        &:nth-child(3) {
          .icon {
            width: 54px;
            height: 54px;
            background-image: url("../../images/credit-park/2.png");
          }
        }
        &:nth-child(4) {
          .icon {
            width: 54px;
            height: 56px;
            background-image: url("../../images/credit-park/3.png");
          }
        }
        &:nth-child(5) {
          .icon {
            width: 52px;
            height: 50px;
            background-image: url("../../images/credit-park/4.png");
          }
        }
        &:nth-child(5) {
          .icon {
            width: 54px;
            height: 49px;
            background-image: url("../../images/credit-park/5.png");
          }
        }
        &:last-child {
          margin-right: 0;
          &:after {
            width: 0;
          }
          .icon {
            width: 47px;
            height: 54px;
            background-image: url("../../images/credit-park/6.png");
          }
        }
      }
    }
    .btn {
      cursor: pointer;
      font-size: 18px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      line-height: 59px;
      height: 59px;
      width: 210px;
      margin: 85px auto 0;
      background: url("../../images/credit-park/btn.png");
    }
  }
  .about-wrap {
    width: 100%;
    height: 603px;
    background-position: center center;
    background-image: url("../../images/credit-park/bg.png");
    .about-content {
      position: relative;
      width: 1200px;
      margin: 0 auto;
      .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 460px;
        padding: 35px 26px 0 22px;
        height: 568px;
        .name {
          font-size: 24px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(255, 255, 255, 1);
          margin-bottom: 9px;
          letter-spacing: 4px;
        }
        .english {
          font-size: 18px;
          font-family: AbadiMT-CondensedLight;
          font-weight: normal;
          color: rgba(255, 255, 255, 1);
        }
        .banner {
          width: 460px;
          height: 150px;
          margin-top: 35px;
          margin-bottom: 46px;
          background-size: 100%;
          background-image: url("../../images/credit-park/Bitmap(14).png");
        }
        .desc {
          font-size: 18px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 35px;
        }
      }
      .right-content {
        padding-left: 31px;
        .name {
          font-size: 24px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(255, 255, 255, 1);
          margin-bottom: 9px;
          letter-spacing: 4px;
        }
        .english {
          font-size: 18px;
          font-family: AbadiMT-CondensedLight;
          font-weight: normal;
          color: rgba(255, 255, 255, 1);
          margin-bottom: 32px;
        }
        .info-item {
          width: 640px;
          .info-list {
            margin-bottom: 20px;
            .pic {
              width: 140px;
              height: 140px;
              background-size: 100%;
              background-image: url("../../images/credit-park/Bitmap(1).png");
            }
            .info {
              width: 484px;
              margin-left: 5px;
              .info-title {
                padding: 10px 0;
                font-size: 18px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
              }
              .desc {
                font-size: 12px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(235, 235, 235, 1);
                line-height: 20px;
                margin-bottom: 5px;
              }
              .nums {
                font-size: 12px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                .date {
                  margin-right: 33px;
                  span {
                    position: relative;
                    top: 2px;
                    display: inline-block;
                    width: 13px;
                    height: 13px;
                    margin-right: 6px;
                    background-size: 100%;
                    background-image: url("../../images/credit-park/icon.png");
                  }
                }
                .click {
                  span {
                    position: relative;
                    top: 1px;
                    display: inline-block;
                    width: 14px;
                    height: 10px;
                    margin-right: 6px;
                    background-size: 100%;
                    background-image: url("../../images/credit-park/icon1.png");
                  }
                }
              }
            }
            &:nth-child(2) {
              .pic {
                background-image: url("../../images/credit-park/Bitmap.png");
              }
            }

            &:nth-child(3) {
              .pic {
                background-image: url("../../images/credit-park/Bitmap(2).png");
              }
            }
          }
        }
      }
      .about-left {
        width: 460px;
        background: rgba(255, 255, 255, 1);
        opacity: 0.16;
        padding: 35px 26px 0 22px;
        height: 568px;
      }
    }
  }
  //风险贷款
  .agency-wrap {
    background-color: #fff;
    padding-bottom: 94px;
    padding-top: 85px;
    .title {
      text-align: center;
      .name {
        font-size: 24px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(92, 88, 88, 1);
      }
      div {
        font-size: 18px;
        font-family: AbadiMT-CondensedLight;
        font-weight: normal;
        color: rgba(185, 185, 185, 1);
        margin-top: 5px;
      }
    }
    .agency-content {
      width: 1200px;
      margin: 22px auto 0;
      overflow: hidden;
      .agency-list {
        width: 1201px;
        height: 317px;
        box-sizing: border-box;
        img {
          width: 1201px;
          height: 317px;
        }
      }
    }
  }
  //底部
  .footer {
    height: 181px;
    background-color: #2b2b2b;
    font-size: 14px;
    color: #b1b1b1;
    .footer-wrap {
      position: relative;
      width: 1200px;
      margin: 0 auto;
      font-family: PingFangSC-Regular;
      font-weight: Regular;
      color: #fff;
      .footer-left {
        padding-top: 27px;
        p {
          padding: 0;
          margin: 0;
          margin-bottom: 9px;
          letter-spacing: 1px;
        }
      }
      .footer-right {
        position: absolute;
        right: 0;
        top: 21px;
        img {
          width: 134px;
          height: 134px;
        }
      }
    }
  }
}
</style>
